<template>
  <div class="exam-main">
    <!-- 搜索区域 -->
    <el-form class="form-search" inline ref="form" :model="formData" label-line-height="120px">
      <el-row type="flex" justify="space-between">
        <el-form-item label="考试名称">
          <el-input placeholder="考试名称" v-model.trim="formData.exam_name"></el-input>
        </el-form-item>
        <el-form-item label="学科名称">
          <el-select
            @change="changeSub(formData.subject_id)"
            @focus="getSubList"
            v-model="formData.subject_id"
            placeholder="归属学科"
          >
            <el-option
              v-for="item in subjectList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称">
          <el-select v-model="formData.directory_id" placeholder="归属目录">
            <el-option
              v-for="item in directoryList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="考试类型">
          <el-select v-model="formData.exam_type" placeholder="请选择">
            <el-option
              v-for="item in examTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-row>
      <el-row type="flex" justify="space-between">
        <el-form-item label="锁屏方式">
          <el-select v-model="formData.lock_screen" placeholder="请选择">
            <el-option
              v-for="item in lockScreenList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="创建人">
          <el-input v-model.trim="formData.create_name" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker
            v-model="time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-row type="flex" justify="end" style="width: 230px">
            <el-button @click="initData" class="search-btn" size="small" type="primary">搜索</el-button>
            <el-button class="reset-btn" @click="reset" size="small">重置</el-button>
          </el-row>
        </el-form-item>
      </el-row>
    </el-form>
    <!-- 表格区域 -->
    <el-table border :data="list" style="width: 100%">
      <el-table-column align="center" prop="date" type="index" label="序号" width="80"></el-table-column>
      <el-table-column header-align="center" align="left" prop="name" label="考试信息">
        <template slot-scope="{ row }">
          <div class="examInfo">
            <el-row type="flex">
              <span>考试ID:{{ row.id }}</span>
              <span>
                考试名称:
                <el-link type="primary">{{ row.exam_name }}</el-link>
              </span>
              <span>归属学科:{{ row.subject_name }}</span>
              <span>归属目录:{{ row.directory_name }}</span>
            </el-row>
            <el-row type="flex">
              <span>
                考试类型:{{
                row.exam_type === 1 ? "阶段考核" : "综合考试"
                }}
              </span>
              <span>考试方式:{{ row.lock_screen === 1 ? "不锁屏" : "锁屏" }}</span>
              <span>创建人:{{ row.create_name }}</span>
              <span>创建时间:{{ row.created_at | formatTime }}</span>
              <span>
                试卷信息:
                <el-tag @click="checkPaper(row.main_paper_name)" size="mini">点击查看</el-tag>
              </span>
              <span>
                推送班级信息:
                <el-tag
                  @click="checkClassInfo(row.exam_bind_class)"
                  v-if="row.exam_bind_class.length > 0"
                  size="mini"
                >点击查看</el-tag>
                <span v-else>暂无</span>
              </span>
            </el-row>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="address" label="操作" width="140">
        <template slot-scope="{ row }">
          <el-tooltip content="推送班级" placement="top">
            <el-button circle size="mini" type="warning" @click="clickHandler(row)">
              <i class="el-icon-connection"></i>
            </el-button>
          </el-tooltip>
          <el-tooltip content="删除" placement="top">
            <el-button
              v-if="row.exam_bind_class.length === 0"
              circle
              size="mini"
              type="danger"
              @click="delHandler(row.id)"
            >
              <i class="el-icon-delete"></i>
            </el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页区 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="formData.page"
      :page-sizes="[10, 20, 30, 50]"
      background
      layout="total,sizes,prev, pager, next,jumper"
      :total="total"
    ></el-pagination>
    <!-- 推送班级弹窗 -->
    <bind-class @updateList="initData" ref="bindClass" />
    <!-- 试卷信息弹窗 -->
    <el-dialog class="paperInfo" width="30%" title="考试试卷信息" :visible.sync="showDialog">
      <el-row>
        <p>
          <span style="margin-right: 20px; margin-left: 20px">主考试卷:</span>
          <el-link type="primary">{{ paperInfo }}</el-link>
        </p>
      </el-row>
      <el-row type="flex" justify="end">
        <el-button type="primary" size="small" @click="showDialog = false">关闭</el-button>
      </el-row>
    </el-dialog>
    <!-- 推送班级信息弹窗 -->
    <class-info ref="classInfo" @updateList="initData" />
  </div>
</template>

<script>
import {
  getExamListAPi,
  delExamApi,
  getSubjectListAPi,
  getClassListApi,
} from '@/api/examInfo'
import { formatTime } from '@/filters/filters'
import BindClass from './bindClass.vue'
import ClassInfo from './classInfo.vue'
export default {
  name: 'ExamList',
  components: {
    BindClass,
    ClassInfo,
  },
  filters: {
    formatTime,
  },

  data() {
    return {
      paperInfo: '',
      showDialog: false, //控制考试信息弹窗
      time: '', //日期数据没处理先存折
      formData: {
        exam_name: '', //考试名称
        subject_id: '', //学科名称
        directory_id: '', //目录
        exam_type: '', //考试类型
        lock_screen: '', //锁屏方法
        create_name: '', //创建人
        create_time: '', //创建时间
        page: 1,
        limit: 10,
      },
      subjectList: [], //学科列表
      directoryList: [], //目录列表
      examTypeList: [
        { value: '1', label: '阶段考试' },
        { value: '2', label: '综合考试' },
      ], //考试类型列表
      lockScreenList: [
        { value: '1', label: '不锁屏' },
        { value: '2', label: '锁屏' },
      ],
      list: [],
      total: 20,
    }
  },
  created() {
    this.initData()
  },
  methods: {
    async initData() {
      let { list, total } = await getExamListAPi(this.formData)
      //   console.log(list);
      // let res = await getSubjectListAPi();
      // this.subjectList = res;
      this.list = list
      this.total = total
    },
    async getSubList() {
      let res = await getSubjectListAPi()
      this.subjectList = res
    },
    //学科选中触发事件
    changeSub(id) {
      // 清空目录
      console.log(id)
      // 找到对应学科对象
      let subObj = this.subjectList.find((item) => item.id === id)
      //   console.log(subObj);
      //   console.log(subObj["children"]);
      // 对学科对象的childred遍历(children的subject_id和父亲的id相等)
      let arr = []
      subObj['children'].forEach((item) => {
        if (item.subject_id === id) arr.push(item)
      })
      this.directoryList = arr
    },
    //点击查看试卷信息
    checkPaper(val) {
      this.showDialog = true
      //   console.log(val);
      this.paperInfo = val
    },
    // 点击查看推送班级信息
    checkClassInfo(val) {
      console.log(val)
      // 去重
      let newArr = []
      val.forEach((item) => {
        if (!newArr.some((obj) => obj.class_id === item.class_id))
          newArr.push(item)
      })
      // console.log(newArr);
      this.$refs.classInfo.list = newArr
      this.$refs.classInfo.showDialog = true
    },
    // 点击推送班级处理函数
    async clickHandler(row) {
      console.log(row)
      let { list } = await getClassListApi({
        subject_id: row.subject_id,
        state: 1,
      })
      console.log(list)
      // 判断是否绑定班级
      if (row.exam_bind_class.length === 0) {
        // 没有绑定班级
        this.$refs.bindClass.classList = list
      } else {
        // 绑定班级
        // 找到绑定班级，从list中剔除之后再传给子组件
        let arr = []
        console.log(arr)
        list.forEach((item) => {
          console.log(item.id)
          if (!row.exam_bind_class.some((obj) => obj.class_id === item.id)) {
            arr.push(item)
          }
        })
        console.log(arr)
        this.$refs.bindClass.classList = arr
      }
      // row.exam_bind_class.findIndex
      // 判断考试信息的科目是否有对应班级选了
      if (list.length !== 0) {
        this.$refs.bindClass.showDialog = true
      }
      this.$refs.bindClass.bindData.exam_id = row.id
      this.$refs.bindClass.bindData.main_paper_id = row.main_paper_id
    },
    // 删除
    async delHandler(id) {
      try {
        await this.$confirm('确认删除吗,是否继续?', '提示', {
          type: 'warning',
        })
      } catch (error) {
        return this.$message.info('已取消')
      }
      await delExamApi(id)
      //判断是否是最后一个
      if (this.formData.page !== 1 && this.list.length === 1) {
        this.formData.page--
      }
      this.$message.success('删除成功')
      this.initData()
    },

    // 重置
    reset() {
      this.formData = {}
      this.time = ''
      this.initData()
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.formData.limit = val
      this.initData()
    },
    handleCurrentChange(val) {
      this.formData.page = val
      this.initData()
    },
  },
}
</script>

<style scoped lang="scss">
.exam-main {
  .form-search {
    .el-button:hover {
      background: #409eff;
      border-color: #409eff;
      color: #fff;
    }
    .reset-btn:hover {
      color: #409eff;
      background: #ecf5ff;
      border-color: #b3d8ff;
    }
  }
  .el-tag:hover {
    cursor: pointer;
  }
  .el-form-item {
    .el-input__inner {
      height: 32px;
      width: 205px;
      justify-content: space-evenly;
    }
    .el-date-editor {
      width: 260px;
    }
    .search-btn {
      color: #409eff;
      background: #ecf5ff;
      border-color: #b3d8ff;
    }
  }
  .examInfo {
    span {
      margin-right: 20px;
    }
  }
  .el-pagination {
    display: flex;
    justify-content: end;
  }

  ::v-deep.el-dialog__header {
    border-bottom: 1px solid #e9ecef;
  }
}
</style>
